<template>
  <Card :dis-hover="true">
    <Row>
      <Col span="4">
        <Tree :data="treeData" :render="treeRender" style="margin: 10px auto"></Tree>
      </Col>
      <Col span="20">
        <base-table ck op :columns="columns" :data="data"
          @add="add" @update="update" @delete="delCheck"
        ></base-table>
        <Modal
          title="栏目信息"
          v-model="editData"
          :mask-closable="false"
          class="editm"
          @on-ok="asyncOK"
          @on-cancel="asyncCancel">
          <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
            <Form-item label="名称" prop="Name">
              <Input v-model="formItem.Name" placeholder="请输入" @on-enter="asyncOK()"></Input>
            </Form-item>


            <Form-item label="栏目" prop="Pid">
              <Select v-model="formItem.Pid" placeholder="请选择">
                <Option v-for="item  in parentRes" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
              </Select>
            </Form-item>
            <Form-item label="目录名" prop="Folder">
              <Input v-model="formItem.Folder" placeholder="请输入" @on-enter="asyncOK()"></Input>
            </Form-item>
            <Form-item label="状态" prop="Status">
              <Radio-group v-model="formItem.Status">
                <Radio :label="1">启用</Radio>
                <Radio :label="0">停用</Radio>
              </Radio-group>
            </Form-item>
            <Form-item label="排序" >
              <InputNumber v-model.number="formItem.Seq" placeholder="请输入" @on-enter="asyncOK()"></InputNumber>
            </Form-item>
            <Form-item label="说明" >
              <Input
                v-model="formItem.Remark"
                type="textarea"
                :autosize="{minRows: 2,maxRows: 5}"
                placeholder="请输入..."
              ></Input>
            </Form-item>
          </Form>
        </Modal>
      </Col>
    </Row>
  </Card>
</template>
<script>
import moment from 'moment';
import { STATIS_HOST } from '@/api/config';
import BaseTable from '@c/table/table';
export default {
  name: 'CMSMenus',
  components: {
    BaseTable
  },
  computed: {
    user () {
      return this.$store.state.app.userInfo;
    },
    parentRes () {
      let pr = [];
      // pr.push({ Id: '0', Name: '一级栏目' });
      for (let e in this.data) {
        pr.push({
          Name: this.data[e].Name,
          Id: this.data[e].Id
        });
      }
      return pr;
    }
  },
  data () {
    return {
      data: [],
      treeData: [],
      columns: [
        { title: ' ', type: 'index', width: 50 },
        { title: '名称', key: 'Name', tooltip: true },
        { title: '单位', key: 'OrgName' },
        { title: 'Context', key: 'Folder', tooltip: true },
        {
          title: '状态',
          key: 'Status',
          render: (h, { row }) => {
            return h('span', {}, row.Status === 1 ? '启用' : '停用');
          }
        },
        { title: '备注', key: 'No' }
      ],
      editData: false,
      formItem: {},
      addid: true,
      ruleValidate: {
        Name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        Pname: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ]
      } //数据编辑表单验证规则
    };
  },
  methods: {
    getAll () {
      this.$api.GetAllMenus().then(
        res => {
          // console.log(res);
          this.data = res.Data.tabledata;
          this.treeData = res.Data.treedata;
        },
        err => {
          if (err) {
            this.$Mesage.error(err);
          }
        }
      );
    },
    treeRender (h, { root, node, data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: data.icon ? data.icon : 'md-bookmark'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', {}, data.title)
          ])
        ]
      );
    },
    asyncOK () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          // this.formItem.Status = parseInt(this.formItem.Status);
          if (this.addid) {
            this.$api.UpdateMenu(this.formItem).then(response => {
              if (response.code === 0) {
                this.getAll();
                this.$Message.success(response.message);
              } else {
                this.$Message.error(response.message, 4);
              }
            }, err => {
              this.$Message.error(err, 4);
            });
          } else if (!this.addid) {
            this.$api.AddMenu(this.formItem).then(response => {
              console.log(response);
              if (response.code === 0) {
                this.getAll();
                this.$Message.success(response.message);
              } else {
                this.$Message.error(response.message, 4);
              }
            }, err => {
              this.$Message.error(err, 4);
            });
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error('表单验证失败!');
        }
      });
      this.editData = false;
      this.$refs['editForm'].resetFields();
    },
    asyncCancel () {
      this.getAll();
      this.$refs['editForm'].resetFields();
    },
    add () {
      this.addid = false;
      this.$refs['editForm'].resetFields();
      this.formItem.OrgId = this.user.Organization.Id;
      this.formItem.OrgName = this.user.Organization.Name;
      this.editData = true;
    },
    update (rows) {
      // console.log(rows);
      if (Array.isArray(rows) && rows.length > 0) {
        this.addid = true;
        this.formItem = rows[0];
        this.editData = true;
      }
    },

    delCheck (rows) {
      if (Array.isArray(rows) && rows.length > 0) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
          onOk: () => {
            this.$api.DeleteMenus(rows).then(res => {
              if (res.code === 0) {
                this.getAll();
                this.$Message.success(res.message);
              }
            }, err => {
              if (err) {
                this.getAll();
                this.$Message.success(err);
              }
            });
          }
        });
      }
    }
  },
  mounted () {
    this.getAll();
  }
};
</script>
<style scoped>
</style>


